<template>
  <div class="loginClass">
    <el-form :model="userLogin" :rules="userRule" ref="loginForm" label-width="100px" size="medium">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="userLogin.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="userLogin.password" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click.prevent="login">登录</el-button>
        <el-button type="warning" round @click.prevent="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      userLogin :{
        username:'',
        password:''
      },
      userRule :{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    login(){
      let form=this.$refs.loginForm;
      form.validate((valid)=>{
        if(!valid){
          return;
        }else {
          let url = "/user/login";
          this.$axios.post(url,this.userLogin).then((res)=>{
            //res  就是服务器端回应的数据 result
            console.log(res)
            if (res.data.code == 200){
              let user = res.data.data;
              sessionStorage.setItem("userInfo",JSON.stringify(user));//存储数据
              this.$router.push({
                path:'/Emp' //组件，名称
              })
            }else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration:1000
              });
            }
          })
        }
      })
    },
    reset(){
      let form=this.$refs.loginForm;
      form.resetFields();
    }
  }
}
</script>
<style scoped>
.loginClass {
width: 30%;
margin: 150px auto;
padding-top: 50px;
padding-right: 30px;
border:1px solid #cccccc;
border-radius: 10px;
}

</style>